var canvas=document.querySelector("#canvas")
var context=canvas.getContext("2d");
const MARGIN=35;
const RADIUS=canvas.height/2-MARGIN

function drawGrid(strokeStyle,fillStyle){
    controlContext.save();
    controlContext.fillStyle=fillStyle;
    controlContext.strokeStyle=strokeStyle;
    controlContext.restore();
}
//画空心圆
function drawCircle(x,y,radius,color){
    context.beginPath();
    context.arc(x,y,radius,0,Math.PI*2,true);
    context.strokeStyle =color
    context.stroke();
}
//画填充圆
function drawFillCircle(x,y,radius,color){
    context.beginPath();
    context.arc(x,y,radius,0,Math.PI*2,false)
    context.closePath();
    context.fillStyle=color
    context.fill();
}
//画空心矩形
function drawRectangle(x,y,width,height,color){
    context.beginPath();
    context.strokeRect(x,y,width,height)
    context.strokeStyle =color
    context.stroke();
}
//画填充矩形
function drawFillrectangle(x,y,width,height,color){
    context.beginPath();
    context.rect(x,y,width,height)
    context.closePath()
    context.fillStyle=color;
    context.fill();
}
//画直线
function drawLine(x1,y1,x2,y2,thickness,color){
    context.beginPath();
    context.lineWidth=thickness
    context.moveTo(x1,y1)
    context.lineTo(x2,y2)
    context.strokeStyle =color
    context.stroke();
}
//画文字
function drawWord(x,y,word,color){
    context.font = "bold 40px arial";
    context.fillStyle = color;
    context.textAlign="center"
    context.textBaseline="middle"
    context.fillText(word,x,y);
}
//画中国象棋棋盘
function drawChess(){
    for(let i=0;i<10;i++){//行
        drawLine(0+35,(canvas.height-70)*i/9+35,canvas.width-35,(canvas.height-70)*i/9+35,1,'green')
    }
    for(let j=0;j<9;j++){//列
        drawLine((canvas.width-70)*j/8+35,0+35,(canvas.width-70)*j/8+35,canvas.height-35,1,'green')
    }
    //大帥田字格
    drawLine((canvas.width-70)*3/8+35,35,(canvas.width-70)*5/8+35,(canvas.height-70)*2/9+35,1,'green')
    drawLine((canvas.width-70)*5/8+35,35,(canvas.width-70)*3/8+35,(canvas.height-70)*2/9+35,1,'green')
    //大將田字格
    drawLine((canvas.width-70)*3/8+35,(canvas.height-70)*7/9+35,(canvas.width-70)*5/8+35,(canvas.height-35),1,'green')
    drawLine((canvas.width-70)*5/8+35,(canvas.height-70)*7/9+35,(canvas.width-70)*3/8+35,(canvas.height-35),1,'green')
    //楚河漢界
    drawFillrectangle(35,(canvas.height-70)*4/9+35,(canvas.width-70),(canvas.height-70)/9,'white')
    drawWord((canvas.width-70)*2/8+35,(canvas.height-70)*4/9+85,'楚河','black')
    drawWord((canvas.width-70)*6/8+35,(canvas.height-70)*4/9+85,'漢界','black')
}
//画棋子
function drawPiece(x,y,radius,arcColor,word,wordColor){
    drawFillCircle(x,y,radius,arcColor)
    drawWord(x,y,word,wordColor)
}
//初始化红军
function redInit(){
    drawPiece(35,35,35,'red','車','yellow')
    drawPiece((canvas.width-70)*1/8+35,35,35,'red','馬','yellow')
    drawPiece((canvas.width-70)*2/8+35,35,35,'red','相','yellow')
    drawPiece((canvas.width-70)*3/8+35,35,35,'red','仕','yellow')
    drawPiece((canvas.width-70)*4/8+35,35,35,'red','帥','yellow')
    drawPiece((canvas.width-70)*5/8+35,35,35,'red','仕','yellow')
    drawPiece((canvas.width-70)*6/8+35,35,35,'red','相','yellow')
    drawPiece((canvas.width-70)*7/8+35,35,35,'red','馬','yellow')
    drawPiece((canvas.width-70)*8/8+35,35,35,'red','車','yellow')
    //炮
    drawPiece((canvas.width-70)*1/8+35,(canvas.height-70)*2/9+35,35,'red','炮','yellow')
    drawPiece((canvas.width-70)*7/8+35,(canvas.height-70)*2/9+35,35,'red','炮','yellow')
    //兵
    drawPiece(35,(canvas.height-70)*3/9+35,35,'red','兵','yellow')
    drawPiece((canvas.width-70)*2/8+35,(canvas.height-70)*3/9+35,35,'red','兵','yellow')
    drawPiece((canvas.width-70)*4/8+35,(canvas.height-70)*3/9+35,35,'red','兵','yellow')
    drawPiece((canvas.width-70)*6/8+35,(canvas.height-70)*3/9+35,35,'red','兵','yellow')
    drawPiece((canvas.width-70)*8/8+35,(canvas.height-70)*3/9+35,35,'red','兵','yellow')
}
//初始化蓝军
function blackInit(){
    drawPiece(35,(canvas.height-35),35,'black','車','white')
    drawPiece((canvas.width-70)*1/8+35,(canvas.height-35),35,'black','馬','white')
    drawPiece((canvas.width-70)*2/8+35,(canvas.height-35),35,'black','象','white')
    drawPiece((canvas.width-70)*3/8+35,(canvas.height-35),35,'black','士','white')
    drawPiece((canvas.width-70)*4/8+35,(canvas.height-35),35,'black','將','white')
    drawPiece((canvas.width-70)*5/8+35,(canvas.height-35),35,'black','士','white')
    drawPiece((canvas.width-70)*6/8+35,(canvas.height-35),35,'black','象','white')
    drawPiece((canvas.width-70)*7/8+35,(canvas.height-35),35,'black','馬','white')
    drawPiece((canvas.width-70)*8/8+35,(canvas.height-35),35,'black','車','white')
    //炮
    drawPiece((canvas.width-70)*1/8+35,(canvas.height-70)*7/9+35,35,'black','炮','white')
    drawPiece((canvas.width-70)*7/8+35,(canvas.height-70)*7/9+35,35,'black','炮','white')
    //兵
    drawPiece(35,(canvas.height-70)*6/9+35,35,'black','卒','white')
    drawPiece((canvas.width-70)*2/8+35,(canvas.height-70)*6/9+35,35,'black','卒','white')
    drawPiece((canvas.width-70)*4/8+35,(canvas.height-70)*6/9+35,35,'black','卒','white')
    drawPiece((canvas.width-70)*6/8+35,(canvas.height-70)*6/9+35,35,'black','卒','white')
    drawPiece((canvas.width-70)*8/8+35,(canvas.height-70)*6/9+35,35,'black','卒','white')
}
//游戏初始化
function initChess(){
    //1.画个棋盘
    drawChess()
    //2.紅方棋子初始化
    redInit()
    //3.黑方棋子初始化
    blackInit()
}

initChess()
